<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <base href="/" />
    <meta charset="utf-8" />
    <title><%= htmlWebpackPlugin.options.title || 'Browserable AI' %></title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=5.0, user-scalable=1"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <meta
      property="og:title"
      content="Browserable AI"
    />
    <meta property="og:url" content="https://www.browserable.ai" />
    <meta
      property="og:description"
      content="Browserable AI"
    />
    <meta
      property="og:image"
      content="https://res.cloudinary.com/adaface/image/upload/v1681898053/btw-meta-image.png"
    />
    <meta property="og:type" content="website" />
    <meta name="theme-color" content="#000000" />
    <meta name="apple-mobile-web-app-title" content="www.browserable.ai" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="#333333" />
    <link
      rel="shortcut icon"
      href="%PUBLIC_URL%/media/images/favicon.ico"
    />

    <link rel="stylesheet" href="%PUBLIC_URL%/media/styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.min.css"
      rel="stylesheet"
    />
    <script>
      window.addEventListener(
        "message",
        function (event) {
          if (event.data.type === "setIframeHeight") {
            if (event.origin !== window.location.origin) {
              // Only accept messages from the same origin
              return;
            }
            var iframe = document.getElementById(event.data.iframeId);
            if (iframe) {
              iframe.style.height = event.data.height + 20 + "px";
            }
          }
        },
        false
      );
    </script>
    <!-- Any analytics scripts go here -->
  </head>
  <body>
    <div
      id="root"
      style="min-height: 100vh; display: flex; flex-direction: column"
    >
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
          <filter id="gooey">
            <feGaussianBlur
              in="SourceGraphic"
              stdDeviation="10"
              result="blur"
            ></feGaussianBlur>
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
              result="goo"
            ></feColorMatrix>
            <feBlend in="SourceGraphic" in2="goo"></feBlend>
          </filter>
        </defs>
      </svg>
      <div class="blob blob-0"></div>
      <div class="blob blob-1"></div>
      <div class="blob blob-2"></div>
      <div class="blob blob-3"></div>
      <div class="blob blob-4"></div>
      <div class="blob blob-5"></div>
      <style type="text/css">
        html,
        body {
          font-size: 16px;
          height: 100%;
          width: 100%;
        }

        .blob {
          background: rgba(187, 187, 187, 0.7);
          border-radius: 50%;
          height: 2rem;
          left: calc(50% - 1rem);
          position: absolute;
          top: calc(50% - 1rem);
          width: 2rem;
        }

        .blob-2 {
          -webkit-animation: animate-to-2 1.5s infinite;
          animation: animate-to-2 1.5s infinite;
        }

        .blob-3 {
          -webkit-animation: animate-to-3 1.5s infinite;
          animation: animate-to-3 1.5s infinite;
        }

        .blob-1 {
          -webkit-animation: animate-to-1 1.5s infinite;
          animation: animate-to-1 1.5s infinite;
        }

        .blob-4 {
          -webkit-animation: animate-to-4 1.5s infinite;
          animation: animate-to-4 1.5s infinite;
        }

        .blob-0 {
          -webkit-animation: animate-to-0 1.5s infinite;
          animation: animate-to-0 1.5s infinite;
        }

        .blob-5 {
          -webkit-animation: animate-to-5 1.5s infinite;
          animation: animate-to-5 1.5s infinite;
        }

        @-webkit-keyframes animate-to-2 {
          25%,
          75% {
            -webkit-transform: translateX(-1.5rem) scale(0.75);
            transform: translateX(-1.5rem) scale(0.75);
          }
          95% {
            -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
          }
        }

        @keyframes animate-to-2 {
          25%,
          75% {
            -webkit-transform: translateX(-1.5rem) scale(0.75);
            transform: translateX(-1.5rem) scale(0.75);
          }
          95% {
            -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
          }
        }

        @-webkit-keyframes animate-to-3 {
          25%,
          75% {
            -webkit-transform: translateX(1.5rem) scale(0.75);
            transform: translateX(1.5rem) scale(0.75);
          }
          95% {
            -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
          }
        }

        @keyframes animate-to-3 {
          25%,
          75% {
            -webkit-transform: translateX(1.5rem) scale(0.75);
            transform: translateX(1.5rem) scale(0.75);
          }
          95% {
            -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
          }
        }

        @-webkit-keyframes animate-to-1 {
          25% {
            -webkit-transform: translateX(-1.5rem) scale(0.75);
            transform: translateX(-1.5rem) scale(0.75);
          }
          50%,
          75% {
            -webkit-transform: translateX(-4.5rem) scale(0.6);
            transform: translateX(-4.5rem) scale(0.6);
          }
          95% {
            -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
          }
        }

        @keyframes animate-to-1 {
          25% {
            -webkit-transform: translateX(-1.5rem) scale(0.75);
            transform: translateX(-1.5rem) scale(0.75);
          }
          50%,
          75% {
            -webkit-transform: translateX(-4.5rem) scale(0.6);
            transform: translateX(-4.5rem) scale(0.6);
          }
          95% {
            -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
          }
        }

        @-webkit-keyframes animate-to-4 {
          25% {
            -webkit-transform: translateX(1.5rem) scale(0.75);
            transform: translateX(1.5rem) scale(0.75);
          }
          50%,
          75% {
            -webkit-transform: translateX(4.5rem) scale(0.6);
            transform: translateX(4.5rem) scale(0.6);
          }
          95% {
            -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
          }
        }

        @keyframes animate-to-4 {
          25% {
            -webkit-transform: translateX(1.5rem) scale(0.75);
            transform: translateX(1.5rem) scale(0.75);
          }
          50%,
          75% {
            -webkit-transform: translateX(4.5rem) scale(0.6);
            transform: translateX(4.5rem) scale(0.6);
          }
          95% {
            -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
          }
        }

        @-webkit-keyframes animate-to-0 {
          25% {
            -webkit-transform: translateX(-1.5rem) scale(0.75);
            transform: translateX(-1.5rem) scale(0.75);
          }
          50% {
            -webkit-transform: translateX(-4.5rem) scale(0.6);
            transform: translateX(-4.5rem) scale(0.6);
          }
          75% {
            -webkit-transform: translateX(-7.5rem) scale(0.5);
            transform: translateX(-7.5rem) scale(0.5);
          }
          95% {
            -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
          }
        }

        @keyframes animate-to-0 {
          25% {
            -webkit-transform: translateX(-1.5rem) scale(0.75);
            transform: translateX(-1.5rem) scale(0.75);
          }
          50% {
            -webkit-transform: translateX(-4.5rem) scale(0.6);
            transform: translateX(-4.5rem) scale(0.6);
          }
          75% {
            -webkit-transform: translateX(-7.5rem) scale(0.5);
            transform: translateX(-7.5rem) scale(0.5);
          }
          95% {
            -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
          }
        }

        @-webkit-keyframes animate-to-5 {
          25% {
            -webkit-transform: translateX(1.5rem) scale(0.75);
            transform: translateX(1.5rem) scale(0.75);
          }
          50% {
            -webkit-transform: translateX(4.5rem) scale(0.6);
            transform: translateX(4.5rem) scale(0.6);
          }
          75% {
            -webkit-transform: translateX(7.5rem) scale(0.5);
            transform: translateX(7.5rem) scale(0.5);
          }
          95% {
            -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
          }
        }

        @keyframes animate-to-5 {
          25% {
            -webkit-transform: translateX(1.5rem) scale(0.75);
            transform: translateX(1.5rem) scale(0.75);
          }
          50% {
            -webkit-transform: translateX(4.5rem) scale(0.6);
            transform: translateX(4.5rem) scale(0.6);
          }
          75% {
            -webkit-transform: translateX(7.5rem) scale(0.5);
            transform: translateX(7.5rem) scale(0.5);
          }
          95% {
            -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
          }
        }
      </style>
    </div>
    <% if (htmlWebpackPlugin.options.window) { %>
    <script>
      <% for (var varName in htmlWebpackPlugin.options.window) { %>
        window['<%= varName %>'] = <%= JSON.stringify(htmlWebpackPlugin.options.window[varName]) %>;
        <% } %>
    </script>
    <% } %> <% if (htmlWebpackPlugin.options.googleAnalytics) { %>
    <script>
      (function(i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function() {
          (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
          m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
      })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

      <% if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
        ga('create', '<%= htmlWebpackPlugin.options.googleAnalytics.trackingId %>', 'auto');
        <% } else {
          throw new Error("html-webpack-template requires googleAnalytics.trackingId config");
        } %>

        <% if (htmlWebpackPlugin.options.googleAnalytics.pageViewOnLoad) { %>
          ga('send', 'pageview');
          <% } %>
    </script>
    <% } %>
    <noscript>
      <div
        style="
          align-items: center;
          display: flex;
          font-size: 30px;
          justify-content: center;
          min-height: 100vh;
        "
      >
        This website need Javascript. Please turn it on.
      </div>
    </noscript>
    <script>
      var rootElement = document.querySelector(":root");
    </script>
  </body>
</html>
